<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="content" v-else>
		<u-navbar bgColor="rgba(0,0,0,0)" :placeholder="true" :fixed="true" v-if="!isScroll">
			<view slot="left">
				<image :src="'/images/navicon-back.png' | formatImgUrl" class="newicon" mode="aspectFill" @tap="$back" ></image>
			</view>
			<view slot="right">
				<image :src="'/images/navicon-search.png' | formatImgUrl" class="newicon" mode="aspectFill" @click="$goto('/pages/find/searchCircle?id='+id)"></image>
				<image :src="'/images/navicon-more.png' | formatImgUrl" class="newicon" style="margin-left: 12px;" mode="aspectFill" @tap="show=true"></image>
			</view>
		</u-navbar>
		<u-navbar bgColor="#fff" :title="info.name" :placeholder="true" :fixed="true" v-if="isScroll">
			<view slot="left">
				<image :src="'/images/navicon-backb.png' | formatImgUrl" class="newicon" mode="aspectFill" @tap="$back" ></image>
			</view>
			<view slot="right">
				<image :src="'/images/navicon-searchb.png' | formatImgUrl" class="newicon" mode="aspectFill" @click="$goto('/pages/find/searchCircle?id='+id)"></image>
				<image :src="'/images/navicon-moreb.png' | formatImgUrl" class="newicon" style="margin-left: 12px;" mode="aspectFill" @tap="show=true" v-if="uid != $db.get('userInfo').membe_id"></image>
			</view>
		</u-navbar>
		
		
		<image :src="info.bg_img | formatImgUrl" class="tbg" mode="aspectFill"></image>
		<view class="jobox">
			<view class="dingbox">
				<image :src="info.img | formatImgUrl" class="head" mode=""></image>
				<view class="dingyou">
					<view class="title">
						{{info.name}}
					</view>
					<view class="txt">
						{{info.row_num}}帖子<text>{{info.fans_num}}粉丝</text>
					</view>
					<view class="xiabox">

						<view class="headbox">
							<image :src="item.user.pic | formatImgUrl" class="pic" mode=""
								v-for="item in info.join_user" v-if="item.user"></image>
						</view>

						<view class="add" @click="joinGroup" v-if="!info.is_join">
							关注
						</view>
						<view class="yiadd" @click="joinGroup" v-else>
							已加入
						</view>
					</view>
				</view>
			</view>

			<view class="jietxt">

				<rich-text :nodes="info.des"></rich-text>
			</view>


		</view>
		<view class="hotbox" v-if="hotList.total">
			<view class="biao">
				<view class="line"></view>
				<view class="btitle">
					圈内热门
				</view>
			</view>
			<view class="lieli" v-for="(item,index) in hotList.data" @click="$goto('/pages/find/content?id='+item.id)">
				<image :src="'/images/1.png' | formatImgUrl" mode="aspectFit" v-if="!index" class="rankicon"></image>
				<image :src="'/images/2.png' | formatImgUrl" mode="aspectFit" v-if="index == 1" class="rankicon"></image>
				<image :src="'/images/3.png' | formatImgUrl" mode="aspectFit" v-if="index == 2" class="rankicon"></image>
				
				<!-- <view class="onetxt" v-if="!index">
					{{index + 1}}
				</view>
				<view class="twotxt" v-else-if="index == 1">
					{{index + 1}}
				</view>
				<view class="threetxt" v-else-if="index == 2">
					{{index + 1}}
				</view> -->
				<view class="lieyou">
					<view class="top">
						<view class="title">
							{{item.title}}
						</view>
						
						<image :src="'/images/baoicon.png' | formatImgUrl" class="f-icon" mode="aspectFit"  v-if="index == 0"></image>
						<image :src="'/images/hoticon.png' | formatImgUrl" class="f-icon" mode="aspectFit"  v-if="index == 1 || index == 2"></image>

						<view class="wtxt">
							{{item.look_num}}
						</view>
					</view>
					<view class="di">
						<image :src="item.pic  | formatImgUrl" class="dipic" mode=""></image>
						<view class="ditxt oneline">
							{{item.desc}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="hotbox">
			<view class="biao">
				<view class="line"></view>
				<view class="btitle">
					<text v-if="order_type==1">热门精选</text>
					<text v-if="order_type==2">最新发布</text>
				</view>

				<view class="tuiyou"  @click="qiehuan()">
					<image :src="'/images/qh1.png' | formatImgUrl" class="tuipic" mode="" v-if="order_type==1"></image>
					<image :src="'/images/qh2.png' | formatImgUrl" class="tuipic" mode="" v-if="order_type==2"></image>
					<view class="tuitxt">
							切换排序
					</view>
				</view>

			</view>
			<view class="empytView" v-if="!articleList.length">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			</view>
			<custom-waterfalls-flow  ref="waterfallsFlowRef" v-if="articleList.length>0" :value="articleList"  @imageClick="imageClick">
								
								    <!-- #ifdef MP-WEIXIN -->
			       <view class="item" v-for="(item,index) in articleList" :key="index" slot="slot{{index}}"  @click="$goto('/pages/find/content?id='+item.id)"> 
										<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
											<view class="destxt lines">
												{{item.desc}}
											</view>
										</view>
										<view class="cnt">
											<view class="carbox">
												<view class="numtxt" v-if="JSON.parse(item.img).length">
													{{JSON.parse(item.img).length}}
												</view>
												<view class="title oneline" @tap.stop="$goto('/pages/find/content?id='+item.id)">{{item.title}}</view>
												
												<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
													mode=""></image>
											</view>
											
											<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
												<view class="qli" v-for="(item1,index1) in item.tags">
													#{{item1}}
												</view>
											</scroll-view>
											
											
											<view class="haobox">
												<!-- <view class="wen" v-if="item.hot">
													{{$db.get('config').diy_hot_label}}
												</view>
												<view class="wen" v-if="item.sift">
													{{$db.get('config').diy_sift_label}}
												</view>
												<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
													{{item.gid?item.qz:'默认圈子'}}
												</view> -->
												
												<!-- v-if="!item.gid && !item.hot && !item.sift" -->
												<view style="display: flex;justify-content: flex-start;align-items: center;">
													<image :src="item.pic | formatImgUrl"
														style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
													<text
														style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
												</view>
												<view class="display-flex">
													<!-- <view class="ybox mr10">
														<image src="/static/images/tc.png"
															class="hart"></image>
														<view class="ytxt">
															{{item.remark_num}}
														</view>
													</view> -->
													<view class="ybox">
														 <!-- @tap.stop="userLike(1,item.id,index)" -->
														<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
															class="hart" style="width: 32rpx;height: 32rpx;"></image>
														<view class="ytxt" :style="{color: item.isLiked ? '#43DC71' : '#999'}">
															{{item.like_num || '点赞'}}
														</view>
													</view>
												</view>
												
											</view>
										</view>
			       </view>
									<!-- #endif -->
									
									<!-- #ifndef MP-WEIXIN -->
									<template v-slot:default="item">
										<view class="item"  @click="$goto('/pages/find/content?id='+item.id)"> 
											<view v-if="item.image=='https://cdnauth.dreamyuewen.com/images/f1.jpg'" class="emptyImg ">
												<view class="destxt lines">
													{{item.desc}}
												</view>
											</view>
											<view class="cnt">
												<view class="carbox">
													<view class="numtxt" v-if="JSON.parse(item.img).length">
														{{JSON.parse(item.img).length}}
													</view>
													<view class="title oneline" @tap.stop="$goto('/pages/find/content?id='+item.id)">{{item.title}}</view>
													
													<image :src="'/images/ju1.png' | formatImgUrl" @tap.stop="aid=item.id,act_info=item,show1 = true" class="jupic"
														mode=""></image>
												</view>
												
												<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;">
													<view class="qli" v-for="(item1,index1) in item.tags">
														#{{item1}}
													</view>
												</scroll-view>
												
												<view class="haobox">
													<!-- <view class="wen" v-if="item.hot">
														{{$db.get('config').diy_hot_label}}
													</view>
													<view class="wen" v-if="item.sift">
														{{$db.get('config').diy_sift_label}}
													</view>
													<view class="wen" v-if="(!item.hot || !item.sift) && item.gid">
														{{item.gid?item.qz:'默认圈子'}}
													</view> -->
													
													<!-- v-if="!item.gid && !item.hot && !item.sift" -->
													<view style="display: flex;justify-content: flex-start;align-items: center;">
														<image :src="item.pic | formatImgUrl"
															style="width: 45rpx;height: 45rpx;border-radius: 100px;" mode="aspectFill"></image>
														<text
															style="font-size: 24rpx;padding-left: 8rpx;color: #999;width: 165rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.username}}</text>
													</view>
													<view class="display-flex">
														<!-- <view class="ybox mr10">
															<image src="/static/images/tc.png"
																class="hart"></image>
															<view class="ytxt">
																{{item.remark_num}}
															</view>
														</view> -->
														<view class="ybox">
															 <!-- @tap.stop="userLike(1,item.id,index)" -->
															<image :src="(item.isLiked ? '/images/zz1.png' : '/images/zz.png') | formatImgUrl"
																class="hart" style="width: 32rpx;height: 32rpx;"></image>
															<view class="ytxt" :style="{color: item.isLiked ? '#43DC71' : '#999'}">
																{{item.like_num || '点赞'}}
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</template>
									<!-- #endif -->
			   </custom-waterfalls-flow>
		</view>


		<!-- 加号 -->
		<image :src="'/images/adda.png' | formatImgUrl" class="addpic" mode=""
			@click="$goto('/pages/finance/fabu?gid='+info.id+'&group_name='+info.name)"></image>
		<!-- 举报弹框 -->
		<u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="matop" @click="goToreport">
					<image :src="'/images/jing.png' | formatImgUrl" class="mapic" mode=""></image>
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png' | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup>
		<!-- 是否退出 -->
		<u-popup :show="tuishow" :round="10" mode="center" @close="tuiclose" @open="open">
			<view class="tuichu">
				<view class="tuititle">
					是否退出圈子
				</view>
				<view class="quren">
					<view class="quli" @click="tuishow = false">
						取消
					</view>
					<view class="quli active" @click="queren">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		
		
		<view v-if="show1" class="biaoqian">
			<view class="top">减少标签下内容推荐</view>
			<view class="tab">
				<view  v-for="(item,index) in act_info.tags" >#{{item}}</view>
			</view>
			
			<view class="not_like" v-if="act_info.tags.length>0">
				不喜欢的标签可在“设置”中彻底屏蔽
			</view>
			<view class="not_like" v-else>
				该内容未绑定任何标签
			</view>
			<view class="line">
			</view>
			<view class="cont_t display-flex" :class="act_info.tags.length == 0 ? 'cont_t-gray' : ''">
				<view class="t1 display-flex" @click="no_like(1)">
					<image :src="'/images/home_book.png' | formatImgUrl" mode="" v-if="act_info.tags.length > 0"></image>
					<image :src="'/images/home_book1.png' | formatImgUrl" mode="" v-else></image>
					<view class="tex">
						内容不感兴趣
					</view>
				</view>
			</view>
			<view class="cont_b display-flex">
				<view class="t1 display-flex" @click="no_like(2)">
					<image :src="'/images/home_man.png' | formatImgUrl" mode=""></image>
					<view class="tex">
						作者不感兴趣
					</view>
				</view>
				
			</view>
			<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
		</view>
		<view v-if="show1" @click="show1=false" class="zhezhao">
		</view>
		
	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	// import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		components: {
			// waterfallsFlow
		},
		data() {
			return {
				id: 0,
				info: {},
				// 举报弹框
				show: false,
				// 头像
				headList: [],
				// 瀑布流
				list: {},
				tuishow: false,
				page: 1,
				articleList: [],
				hotList: {},
				order_type: 1,
				
				aid: 0,
				timeStamp:"",
				act_info:null,
				
				show1:false,
				loading:false,
				isScroll: false,
				totalPage: true
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 100){
				this.isScroll = true
			}else{
				this.isScroll = false
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.getInfo()
				this.getList()
				this.getHotList()
			} else {
				this.$common.errorToShow('参数异常')
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 800);
			console.log('refresh');
			this.page = 1;
			this.articleList = [];
			this.list = [];

			this.$refs.waterfallsFlowRef.refresh();
			this.getList();
			this.getHotList()
			this.getInfo();
		},

		onShow() {
			// this.page = 1;
			// this.list = [];
			// this.articleList = [];

			// this.getInfo()
			// this.getList()
			// this.getHotList()

		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getList();
			}
		},
		methods: {
			$goto(url){
				let auth = db.get('auth');
				if (!auth) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				this.$go(url)
			},
			no_like(type){
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
			
						url: '/pages/login/login'
			
					})
					return;
				}
				
				
				if(type == 1 && this.act_info.tags.length<=0){
						this.$common.errorToShow("该文章没有标签")
						return
				}
				
				
				this.$api.default.request('user/no_like',{type:type,id:this.act_info.id}).then((res) => {
					if (res.code) {
						
						this.$common.errorToShow(res.msg)
						this.show1 = false;
						
						this.page = 1;
						this.articleList = [];
						this.getList()
					}
				})
			},
			imageClick(item) {

				//go('/pages/find/content?id='+item.id)
				uni.navigateTo({
					url: '/pages/find/content?id=' + item.id
				})

			},
			qiehuan() {

				this.order_type = this.order_type == 1 ? 2 : 1

				this.page = 1;
				this.articleList = [];
				this.list = [];
				this.$refs.waterfallsFlowRef.refresh();
				this.getList();

			},
			getList() {
				this.$api.default.request('Discover/groupArticle1', {
					gid: this.id,
					sift: 1,
					page: this.page,
					type: this.order_type
				}).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.articleList.push(item)
							})
						} else {
							this.articleList = res.data.data
						}
					}
					
					this.totalPage = false
				})
			},
			getHotList() {
				this.$api.default.request('Discover/groupArticle1', {
					gid: this.id,
					hot: 1,
					page: 1
				}).then((res) => {
					if (res.code) {
						this.hotList = res.data
					}
				})
			},
			joinGroup() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({

						url: '/pages/login/login'

					})
					return;
				}

				this.$api.default.request('Discover/joinGroup', {
					id: this.id
				}, 'POST').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getInfo()
						})
					}
				})
			},
			// 退出弹框
			queren() {
				this.tuishow = false
				this.joinGroup()
			},
			tuigroup() {
				this.tuishow = true
			},
			tuiclose() {
				this.tuishow = false
			},
			getInfo() {
				this.$api.default.request('Discover/groupInfo', {
					id: this.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.info = res.data
					}
				})
			},
			toggleLike(index) {
				this.list[index].isLiked = !this.list[index].isLiked
			},
			// 举报弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},

			goToreport() {
				this.show = false
				uni.navigateTo({
					url: '/pages/find/report?id=' + this.id + '&newtype=8'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		/* #ifdef MP-WEIXIN */
		padding-top: 200px;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		padding-top: 180px;
		/* #endif */
		
		.newicon{
			width: 24px;
			height: 24px;
		}
		
		.cl1{
				height: 48rpx;
				width: 48rpx;;
				position: relative;
				top:110rpx;
		}
		.zhezhao{
			height: 100vh;
			position: fixed;
			top:0rpx;
			right:0px;
			width: 100%;
			z-index:101;
			background: rgba(51, 51, 51, 0.6);
		}
		.biaoqian{
			position: fixed;
			float: left;
			top:50%;
			transform: translateY(-50%);
			z-index:102;
			border-radius: 0.5em;
			background: #fff;
			width: 70%;
			margin-left: 15%;
			text-align: center;
			.top{
				padding-top: 50rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #000;
				float: left;
			    text-align: center;
				width: 80%;
				margin-left: 10%;
			}
			
			.tab{
				padding-top: 10rpx;
				font-size: 21rpx;
				font-weight: 600;
				width:90%;
				margin-left: 5%;
				float: left;
				text-align: center;
				view{
					background: rgba(153, 153, 153, 0.2);
					padding: 2rpx 20rpx 2rpx 20rpx;
					margin-left: 16rpx;
					border-radius: 0.5em;
					text-align: center;
					float: left;
					margin-top: 10rpx;
				}
			}
			
			.not_like{
				width: 100%;
				text-align: center;
				float: left;
				color:#999;
				font-size: 27rpx;
				margin-top:40rpx;
			}
			
			.line{
				margin-top:30rpx;
				width:88%;
				margin-left:6%;
				margin-bottom: 40rpx;
				float: left;
				height: 0px;
				opacity: 1;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}
			.cont_t{
				border-radius: 8px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.05);
				width: calc(100% - 80rpx);
				margin: 0 auto;
				// margin-top: 40rpx;
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					
					height: 86rpx;
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 margin-left: 10rpx;
					}
				}
			
			}
			
			.cont_t-gray{
				background: #F2F5F2;
				color: #999;
			}
			.cont_b{
				width: calc(100% - 80rpx);
				margin: 0 auto;
				margin-top: 20rpx;
				background: rgba(69, 196, 176, 0.05);
				color: #45C4B0;
				justify-content: center;
				
				.t1{
					height: 86rpx;
					justify-content: center;
					
					image{
						width:33rpx;;
						height: 33rpx;
					}
					.tex{
						 white-space: nowrap;
						 margin-left: 10rpx;
					}
				}
				
				
			}
		}
		
		.tbg {
			width: 100%;
			height: 435rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.jobox {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 72rpx 30rpx 20rpx;
			position: relative;

			.dingbox {
				height: 160rpx;
				position: absolute;
				left: 30rpx;
				width: 690rpx;
				top: -110rpx;
				z-index: 22;
				display: flex;
				align-items: flex-end;

				.head {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12px;
					flex-shrink: 0;
					box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
				}

				.dingyou {
					flex-grow: 1;
					padding-left: 12rpx;

					.title {
						font-size: 36rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #FFFFFF;
						padding-bottom: 8rpx;
					}

					.txt {
						font-size: 20rpx;
						padding-bottom: 20rpx;
						color: #FFFFFF;

						text {
							padding-left: 20rpx;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}

					.xiabox {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.headbox {
							position: relative;
							height: 40rpx;

							.pic {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								left: 0;
								top: 0;
								z-index: 8;
								border-radius: 50%;
								border: 2px solid #ffffff;
							}

							.pic:nth-child(2) {
								z-index: 7;
								top: 0;
								left: 36rpx;
							}

							.pic:nth-child(3) {
								z-index: 6;
								top: 0;
								left: 72rpx;
							}

							.pic:nth-child(4) {
								z-index: 5;
								top: 0;
								left: 108rpx;
							}

							.pic:nth-child(5) {
								z-index: 4;
								top: 0;
								left: 144rpx;
							}

							.pic:nth-child(6) {
								z-index: 3;
								top: 0;
								left: 180rpx;
							}

							.pic:nth-child(7) {
								z-index: 2;
								top: 0;
								left: 36rpx;
							}
						}

						.yiadd {
							width: 104rpx;
							height: 40rpx;
							border-radius: 4px;
							opacity: 1;
							background: rgba(153, 153, 153, 0.1);
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #999999;
						}

						.add {
							width: 104rpx;
							height: 40rpx;
							border-radius: 4px;
							opacity: 1;
							background: #45C4B0;
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #FFFFFF;
						}
					}
				}
			}

			.jietxt {
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
			}
		}

		.lieli:first-child {
			padding-top: 0;
		}

		.hotbox {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 20rpx 30rpx 2rpx;

			.biao {
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.line {
					width: 4rpx;
					height: 28rpx;
					border-radius: 42px;
					opacity: 1;
					background: #45C4B0;
				}

				.btitle {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					padding-left: 12rpx;
					color: #3D3D3D;
				}

				.tuiyou {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					float: right;
					position: relative;
					left: 57%;

					.tuipic {
						width: 44rpx;
						height: 44rpx;
					}

					.tuitxt {
						font-size: 28rpx;
						color: #999999;
						padding-left: 10rpx;
					}
				}

				
			}

			.lieli:last-child {
				border: none;
			}

			.lieli {
				padding: 16rpx 26rpx 16rpx 10rpx;
				display: flex;
				align-items: flex-start;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.rankicon{
					width: 18rpx;
					height: 32rpx;
				}

				.onetxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #45C4B0;
					font-style: italic;
					flex-shrink: 0;
				}

				.twotxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #9AEBA3;
					font-style: italic;
					flex-shrink: 0;
				}

				.threetxt {
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #DAFDBA;
					font-style: italic;
					flex-shrink: 0;
				}
				
				.othertxt{
					padding-top: 2rpx;
					font-size: 26rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #999;
					font-style: italic;
					flex-shrink: 0;
				}

				.lieyou {
					padding-left: 12rpx;
					flex-grow: 1;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 8rpx;

						.title {
							font-size: 24rpx;
							font-weight: bold;
							letter-spacing: 0em;
							color: #3D3D3D;
							flex-shrink: 0;
						}

						.bao {
							flex-shrink: 0;
							width: 32rpx;
							height: 32rpx;
							line-height: 32rpx;
							color: #ffffff;
							border-radius: 4px;
							opacity: 1;
							background: #45C4B0;
							font-size: 20rpx;
							color: #FFFFFF;
							font-style: italic;
							margin: 0 8rpx;
							font-family: YouSheBiaoTiHei;
						}

						.baoactive {
							background: #9AEBA3;
						}
						
						.f-icon{
							width: 32rpx;
							height: 32rpx;
							margin-left: 4px;
						}

						.wtxt {
							flex-grow: 1;
							font-size: 20rpx;
							text-align: right;
							letter-spacing: 0.08em;
							color: #999999;
						}
					}

					.di {
						display: flex;
						align-items: center;

						.dipic {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
						}

						.ditxt {
							width: 580rpx;
							font-size: 20rpx;
							font-weight: normal;
							letter-spacing: 0.08em;
							color: #999999;
							padding-left: 8rpx;
						}
					}
				}
			}

			.lieli:nth-child(1) {
				padding-top: 0 !important;
			}
		}

		.numtxt {
			color: #ffffff;
			font-size: 20rpx;
			position: absolute;
			right: 0rpx;
			top: -50rpx;
			min-width: 16px;
			height: 16px;
			line-height: 16px;
			text-align: center;
			background: rgba(51, 51, 51, 0.9);
			border-radius: 50%;
		}

		.cnt {
			padding: 8rpx 12rpx 20rpx;

			.carbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 8rpx;
				position: relative;

				.title {
					font-size: 28rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.jupic {
					width: 32rpx;
					height: 32rpx;
					flex-shrink: 0;
				}
			}

			.qli {
				background: rgba(153, 153, 153, 0.102);
				padding: 2px 8px 2px 6px;
				border-radius: 89px;
				font-family: 思源黑体;
				font-size: 12px;
				// font-weight: bold;
				color: #999;
				display: inline-block;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
			}

			.haobox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.wen {
					padding: 2rpx 8rpx;
					background: rgba(243, 122, 165, 0.15);
					border-radius: 4px;
					margin-right: 8rpx;
					flex-shrink: 0;
					font-size: 20rpx;
					letter-spacing: 0.08em;
					color: #F37AA5;
				}

				.ybox {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.hart {
						width: 32rpx;
						height: 32rpx;
					}

					.ytxt {
						
						font-size: 20rpx;
						text-align: right;
						letter-spacing: 0.08em;
						color: #999999;
						padding-left: 2rpx;
					}
				}
			}

		}

		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;

			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 68rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;

				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}

			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}

		.addpic {
			position: fixed;
			bottom: 60rpx;
			right: 60rpx;
			width: 80rpx;
			height: 80rpx;
			z-index: 666;
		}

		.tuichu {
			background-color: #ffffff;
			border-radius: 8px;
			width: 480rpx;
			padding: 50rpx 0 40rpx;
			text-align: center;

			.tuititle {
				font-size: 32rpx;
				color: #222222;
				font-weight: bold;
				padding-bottom: 100rpx;
			}

			.quren {
				display: flex;
				align-items: center;
				justify-content: center;

				.quli {
					width: 180rpx;
					height: 60rpx;
					background-color: #F2F5F2;
					border-radius: 5rpx;
					margin: 0 20rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #333;
				}

				.active {
					background-color: #45C4B0;
					color: #ffffff;
				}
			}
		}
		
	}
	
	.emptyImg {
		padding: 12rpx;
		background: #F2F5F2;
		border-radius: 8px;
		
		.lines {
			// max-height: 400rpx;
			text-overflow:ellipsis;
			font-family: '思源黑体';
			font-size: 10px;
			color: #3D3D3D;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
		}
	}
</style>